<template>
        <div class="goodsEntry">
            <div style="padding: 20px">
                    <el-button type="primary" @click="returnOver">返回</el-button>
            </div>
            <el-form :inline="true" style="padding: 20px">
                <el-form-item label="出库时间：">
                    <el-date-picker
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :clearable="false"
                      v-model="endtime"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="changeTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="关键字搜索：">
                    <el-input style="width: 300px;" v-model="queryData.goodsId" placeholder="请输入商品名称" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="入库类型：">
                    <el-select v-model="orderType" size="medium">
                        <el-option value="0" label="自提出库"></el-option>
                        <el-option value="1" label="报损出库"></el-option>
                        <el-option value="2" label="调拨出库"></el-option>
                        
                    </el-select>
                    
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" size="medium" @click="query">查询</el-button>
                    <el-button type="primary" size="medium" @click="exportData">导出</el-button>
                </el-form-item>
               
            </el-form>
      
            <!-- <li class="query-item">
              <span>仓库全部：</span>
              <el-select v-model="queryData.storeId" size="medium">
                <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
              </el-select>
            </li> -->
            <!-- <li class="query-item">
                <span>入库类型：</span>
                <el-select v-model="queryData.inType" size="medium">
                    <el-option value="0" label="新酒入库"></el-option>
                    <el-option value="1" label="转让入库"></el-option>
                </el-select>
            </li> -->
          
         
         
            <!-- <el-button type="primary" size="medium" @click="query">查询</el-button>
              <el-button type="primary" size="medium" @click="exportData">导出</el-button> -->
            <!-- <el-col :span="3" class="goods-category">商品种类：
              <span @click="showCateDialog">8种</span>
            </el-col>
            <el-col :span="3" class="goods-count"> 商品总量：6 </el-col>
            <el-col :span="6" class="goods-id">
              <span>12122312121212231212</span>
              <el-button type="primary" size="small">确定录入</el-button>
            </el-col>
           <el-col :span="4" :offset="2" class="btn-wrapper">
              <el-button type="primary" size="small" @click="okentry">确定录入</el-button>
              <el-button type="warning" size="small" @click="canceloffAll">取消录入</el-button>
            </el-col> -->
     
          <div class="wrapper">
            <el-table class="table" :data="tableData" stripe highlight-current-row border>
                <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column align="center" type="selection">
              </el-table-column>
              <el-table-column align="center" prop="serialNum" label="订单号">
              </el-table-column>
              <el-table-column align="center" prop="orderTime" label="下单时间">
              </el-table-column>
              <el-table-column align="center" prop="hasCount" label="订单数量">
              </el-table-column>
              <el-table-column align="center" prop="skuNo" label="SKU编码">
              </el-table-column>
              <el-table-column align="center" prop="goodsNo" label="商品编号">
              </el-table-column>
              <el-table-column align="center" prop="goodsName" label="商品名称">
                </el-table-column>
             <el-table-column align="center" prop="kindName" label="商品类别">
              </el-table-column>
              <el-table-column align="center" prop="outTime" label="出库时间">
              </el-table-column>
              <el-table-column align="center" prop="type" label="出库类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.orderType == 0">自提出库</span>
                  <span v-if="scope.row.orderType == 1">报损出库</span>
                  <span v-if="scope.row.orderType == 2">调拨出库</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="scanCount" label="出库数量">
              </el-table-column>
              <el-table-column align="center" prop="operator" label="经办人">
              </el-table-column>
              <!-- <el-table-column align="center" prop="raw_desc" label="原料">
              </el-table-column>
              <el-table-column align="center" prop="name" label="生产时间">
              </el-table-column>
              <el-table-column align="center" prop="name" label="入库时间">
              </el-table-column>
              <el-table-column align="center" prop="unit" label="单位">
              </el-table-column> -->
              <el-table-column align="center" prop="address" label="操作" width="150">
                <template slot-scope="scope">
                  <span class="canceloff-btn" v-if="scope.row.type == '0'" @click="selfextra(scope.row)" >查看</span>
                  <span class="canceloff-btn" v-if="scope.row.type == '1'" @click="outData(scope.row)" >查看</span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page.pageSize" :total="page.total" :current-page="page.current"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
          <el-dialog title="商品种类" :visible.sync="goodsCates.show" class="goods-dialog">
            <el-table class="dialog-table" :data="goodsCates.tableData" stripe highlight-current-row border :height="height">
              <el-table-column align="center" prop="date" label="序号">
              </el-table-column>
              <el-table-column align="center" prop="name" label="SKU编码">
              </el-table-column>
              <el-table-column align="center" prop="name" label="商品编码">
              </el-table-column>
              <el-table-column align="center" prop="date" label="商品名称">
              </el-table-column>
              <el-table-column align="center" prop="name" label="商品类别">
              </el-table-column>
              <el-table-column align="center" prop="name" label="香型">
              </el-table-column>
              <el-table-column align="center" prop="date" label="净含量">
              </el-table-column>
              <el-table-column align="center" prop="name" label="单位">
              </el-table-column>
              <el-table-column align="center" prop="name" label="酒精度">
              </el-table-column>
              <el-table-column align="center" prop="name" label="原料">
              </el-table-column>
              <el-table-column align="center" prop="name" label="数量">
              </el-table-column>
            </el-table>
          </el-dialog>
        </div>
      </template>
      
      <script>
        export default {
          data() {
            return {
              height: "auto",
              queryData: {
                startTime:'',
                endTime:'',
                // goodsId:'',
                storeId:'',
                inType:''
              },
              selectedOptions:[],
              goodsCates: {
                show: false,
                tableData: [{}]
              },
              tableData: [{}],
              
              endtime:'',
              page: {
                pageSize: 10,
                current: 1,
                total: 100
              },
              orderType:''
            };
          },
          mounted () {
            this.area();
            this.tableList();
            if(this.$route.params.ptype == 1){
              this.$route.meta.title = '转让出库单'
            }else if(this.$route.params.ptype == 0){
              this.$route.meta.title = '自提出库单'
            }else{
              this.$route.meta.title = '库存统计表'
            }
          },
          methods: {
               //初始化数据
          async tableList() {
            try {
                let { data } = await this.$post({
                    api: "/cellar/out/getOutOrderListDetails",
                    data:{
                     
                      current:this.page.current,
                      pageSize:this.page.pageSize,
                      startTime:this.queryData.startTime,
                      endTime:this.queryData.endTime,
                      goodsId:this.queryData.goodsId,
                      status:0,
                      goodsKindSecond:'',
                      orderType:this.orderType || 0
                    }
                  });
                  if (data.code === 0) {
                    this.tableData = data.data;
                    this.page.total = data.rdPage.total;
                    // this.page.total = data.rdPage.total;
                    // console.log(data)
                    // this.rawList = data.data;
                  } else {
                    this.$message({
                      type: "error",
                      message: data.msg
                    });
                  }
                } catch (e) {
                  this.$message({
                    type: "error",
                    message: "接口报错"
                  });
                }
            },
            //仓库
           async area() {
              try {
                let { data } = await this.$post({
                  api: "/show/store/area"
                  
                });
                if (data.code === 0) {
                  this.selectedOptions = data.data;
                console.log(data)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           //导出
           async exceldetail() {
              try {
                let { data } = await this.$post({
                  api: "/import/instore/detail",
                  data:{
                    current:this.page.current,
                    pageSize:this.page.pageSize,
                    startTime:this.queryData.startTime,
                    endTime:this.queryData.endTime,
                    goodsId:this.queryData.goodsId,
                    storeId:this.queryData.storeId,
                    inType:this.queryData.inType,
                  }
                  
                });
                if (data.code === 0) {
                  let urlstr = url+data.data.replace('static/','');
                    window.location.href=urlstr
                  console.log(data)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
            //查询
            query() {
              this.tableList();
             },
            //导出
            exportData(){
              this.$confirm("取消将导出记录，您确定要导出吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.exceldetail();
                // this.$message({
                //   type: "success",
                //   message: "导出成功!"
                // });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消导出"
                });
              });
            },
            //确定录入
            okentry(){
              this.$router.push('/goodsEntry/detail')
            },
            canceloffAll() {
              this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
            },
            canceloffOne(id) {
              this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
            },
            handleCurrentChange(val) {
              console.log(val);
            },
            showCateDialog() {
              this.goodsCates.show = true;
            },
            //时间选择器
            changeTime(arr){
              console.log(arr)
              this.queryData.startTime = arr[0];
              this.queryData.endTime = arr[1];
            },
            //转让
            outData(row){
             
              this.$router.push('/transferOut/'+row.serialNum)
             
            },
            selfextra(row){
              
              this.$router.push('/selfExtraction/'+row.serialNum)
            },
            returnOver(){
              this.$router.go(-1);
            }
          }
        };
      </script>
      
      <style lang="scss" scoped>
        .query {
          overflow: hidden;
          border-bottom: 1px solid #eeeeee;
          &-item {
            float: left;
            margin: 15px 20px;
          }
          .el-input {
            width: 150px;
          }
          .el-button {
            margin: 0 15px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      
        .entry-info {
          padding: 15px 20px;
          border-bottom: 1px solid #eeeeee;
        }
      
        .goods-category {
          line-height: 32px;
          span {
            color: #0033ff;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      
        .goods-count {
          line-height: 32px;
        }
      
        .goods-id {
          display: flex;
          justify-content: space-between;
          padding: 0 40px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
          span {
            position: relative;
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid #333;
            &:after {
              content: "";
              position: absolute;
              top: -6px;
              left: -6px;
              width: 100%;
              height: 100%;
              padding: 6px;
              border: 1px solid #333;
            }
          }
        }
      
        .wrapper {
          padding: 10px 15px;
        }
      
        .canceloff-btn {
          color: #0033ff;
          cursor: pointer;
        }
      </style>